<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>AJAX无刷新添加数据</title>
    <style>
        #box{
            width: 800px;
            border: 1px solid #000;
            padding: 20px;
            background-color:#feeeed;
            float:left;
        }
        #updateBox{
            position:fixed;
            width:100%;
            height:100%;
            top:0px;
            left:0px;
            background:rgba(0,0,0,0.5);
            display:none;
        }
        #update1{
            width:300px;
            height:200px;
            background:#fff;
            margin:0px auto;
            margin-top:100px;
            padding:20px;
        }
    </style>
</head>
<body>
    <h1>AJAX无刷删除更新数据</h1>
    <hr>
    <div id="box"></div>
    <div id="updateBox">
        <div id="update1">
            <form name="upform" onsubmit="return updateTab()">
                姓名: <input type="text" name="name"><br>
                性别: <input type="radio" name="sex" value="0">女
                      <input type="radio" name="sex" value="1" checked>男
                      <input type="radio" name="sex" value="2">保密<br>
                年龄: <input type="text" name="age"><br>
                地址 : <input type="text" name="province"><br>
                <input type="hidden" name="id" value="23"><br>
                <button>修改</button>
            </form>
        </div>
    </div>
    <script>
        select();
        function select(){
            var xhr=new XMLHttpRequest;
            xhr.onreadystatechange=function (){
                if(xhr.readyState==4){
                    if(xhr.status==200){
                        arr=JSON.parse(xhr.responseText);
                        var table=document.createElement('table');
                        table.border=1;
                        table.id="table";
                        table.cellSpacing=0;
                        table.cellPadding=5;
                        table.width=1000;
                        box.appendChild(table);
                        //添加表头
                        var tr = table.insertRow(0);
                        addTH(tr,['ID','NAME','SEX','AGE','PRO','操作']);
                        for(var i=0;i<arr.length;i++){
                            var tr=table.insertRow(i+1);
                            tr.insertCell(0).innerHTML=arr[i].id;
                            tr.insertCell(1).innerHTML=arr[i].name;
                            tr.insertCell(2).innerHTML=arr[i].sex;
                            tr.insertCell(3).innerHTML=arr[i].age;
                            tr.insertCell(4).innerHTML=arr[i].province;
                            tr.insertCell(5).innerHTML='<button onclick="deletetTab(this)">删除</button><button onclick="update(this)">修改</button>';
                        }
                    }
                }
            }
            xhr.open('get','./1.php',true);
            xhr.send();
        }
        // 添加表头
        function addTH(tr,data){
            for(var i=0;i<data.length;i++){
                var th=document.createElement('th');
                th.innerHTML=data[i];
                tr.appendChild(th);
            }
        }
        // 删除表格
        function deletetTab(obj){

            var tab=obj.parentNode.parentNode;
            var id=tab.children[0].innerHTML;
            var xhr=new XMLHttpRequest;
            xhr.onreadystatechange=function (){
                if(xhr.readyState==4){
                    if(xhr.status==200){
                        if(xhr.responseText>0){
                            table.children[0].removeChild(tab);
                            alert('删除成功');
                        }else{
                            alert('删除失败');
                        }
                    }
                }
            }
            xhr.open('get','./2.php?id='+id,true);
            xhr.send();
        }
        // 修改内容
        function updateTab(){
            var id=document.upform.id.value;
            var name=document.upform.name.value;
            var sex=document.upform.sex.value;
            var age=document.upform.age.value;
            var province=document.upform.province.value;
            console.log(id,name,sex,age,province);
            var xhr=new XMLHttpRequest;
            xhr.onreadystatechange=function (){
                if(xhr.readyState==4){
                    if(xhr.status==200){
                        console.log(xhr.responseText);
                    }
                }
            }
            xhr.open('post','./3.php',true);
            xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
            xhr.send('id='+id+'&name='+name+'&sex='+sex+'&age='+age+'&province='+province);
            return false;
        }
    </script>

</body>
</html>